<template>
	<view class="top">
		<uni-list>
		    <!-- <uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item> -->
		    <uni-list-item  link to="" @click="modifyHead()" >
				<template slot="header">
					<text class="slot-box slot-text">头像</text>
				</template>
				<template slot="footer">
					<image class="slot-image" v-bind:src="base64str" mode="widthFix"></image>
				</template>
			</uni-list-item>
		    <uni-list-item title="昵称" link to="" @click="modifynicheng()" v-bind:rightText="nicheng"></uni-list-item>
			<uni-list-item title="手机号" :showArrow="false" v-bind:rightText="phone"></uni-list-item>
			<uni-list-item rightText="用户名" title="用户名"  :showArrow="false" v-bind:rightText="username"></uni-list-item>
			<uni-list-item  title="收货地址" link to=""  @click="showaddress()"></uni-list-item>
			
		
		</uni-list>
		
		<wyb-popup ref="popup" type="bottom" height="220" width="500" radius="6" :showCloseIcon="false" style="background-color: #F4F4F4;">
		    <view class="popup-content" @click="takephoto()">
				
		        <text class="takephoto">拍照</text>
		    </view>
			<view class="popup-content" @click="choosephoto()">
			    <text class="choosephoto">选择照片</text>
			</view>
			
		</wyb-popup>
		
	</view>
</template>
 
<script>
	
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	
	
	export default{
		components: {
        wybPopup
		},
		data(){
			return{
				
				nicheng:"",
				base64str:"",
				phone:"",
				username:"",
				
				
			}
			
		},
		methods:{
			modifyHead(){
				this.$refs.popup.show();
			},
			takephoto(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera'], //从相册选择
				    success: function (res) {
				        console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			choosephoto(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						const tempFilePaths = res.tempFilePaths;
				        // console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url:getApp().globalData.http+"/user/uploadhead",
							header:{
								// 加token
								'Authorization' : uni.getStorageSync("token")
								
							},
							filePath:tempFilePaths[0],
							name:"myfile", 
							success:(res)=>{
								uni.setStorageSync("iconpath",res.data);
								// console.log(res.data)
								uni.navigateBack({
									delta:getCurrentPages().length-2
								}); 
						
			
							} 
						})
							
						
				    }
				});
			},
			modifynicheng(){
				uni.navigateTo({
					url:'./modifynicheng'
				});
			},
			showaddress(){
				uni.navigateTo({
					url:'./receiveaddress'
				});
			},
		},
		onShow() {
			this.base64str="data:image/png;base64,"+uni.getStorageSync("iconpath").replace(/[\r\n]/g,'');
			this.nicheng=uni.getStorageSync("nicheng");
			this.username=uni.getStorageSync("username");
			this.phone=uni.getStorageSync("phone");
		}
	}
	

</script>

<style scoped>

	
	
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.slot-text {
		flex: 1;
		font-size: 14px;
		
		margin-right: 10px;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.popup-content{
		background-color: #FFFFFF;
		height: 50px;
		margin-top: 5px;

		border-bottom: #E5E5E5 1px solid;
	
		display: flex;
		flex-direction: row;
		
		align-items: center;
		overflow: hidden;
		
	}
	.takephoto{
		margin-left: 45%;
	}
	.choosephoto{
		margin-left: 43%;
	}
	.top{
		overflow: hidden;
	}
	
</style>
